<template>
	<div class="shopcart">
		<ul>
			<li v-for="item in shopcart" :key="item.id">
				<img :src="item.src">
				<div>
					<p>{{item.title}}×{{item.num}}</p>
					<p>￥{{item.price}}</p>
					<p><button @click="del(item)">删除</button></p>
				</div>
			</li>
		</ul>
		<p v-if="shopcart.length">总价：{{totalPrice}}</p>
		<p v-else>购物车暂无商品</p>
	</div>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		name: 'ShopCart',
		//vuex提供了mapState辅助函数，可以简化computed计算属性的写法
		computed: {
			// shopcart(){
			// 	return this.$store.state.shopcart
			// },
			// totalPrice(){
			// 	return this.$store.getters.totalPrice
			// },
			...mapState(['shopcart']),
			...mapGetters(['totalPrice'])
		},
		methods:{
			del(item){
				this.$store.commit('del',item);
			}
		}
		
	}
</script>
<style scoped>
	.shoplist {
		width: 100%;
	}

	li {
		position: relative;
		border-bottom: 1px dashed #ccc;
		padding: 5px;
	}

	li div {
		display: inline-block;
		position: absolute;
		top: 10px;
		width: 120px;
		line-height: 30px;
		font-size: 14px;
	}

	img {
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 10px 8px 10px;
	}

	li div p:nth-child(2) {
		color: #f00;
	}

	button {
		color: white;
		background: coral;
		border: none;
		padding: 5px;
	}
</style>
